<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<view class="box">
					<uni-forms-item label="锁名称" required name="name">
						<uni-easyinput type="text" v-model="FormData.name" :clearable="false" placeholder="请输入锁名称" />
					</uni-forms-item>
					<uni-forms-item label="分组" required name="group_id">
						<picker @change="bindGroup" :range="group" range-key="group_name">
							<view class="picker-input">
								{{ FormData.group_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="next">下一步</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			FormData: {
				name: '',
				group_id: '',
				group_name: ''
			},
			rules: {
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请填写锁名称'
						}
					],
					validateTrigger: 'submit'
				},
				group_id: {
					rules: [
						{
							required: true,
							errorMessage: '请选择分组'
						}
					],
					validateTrigger: 'submit'
				}
			},
			group: []
		};
	},
	onShow() {
		this.getGroup();
	},
	methods: {
		bindGroup(e) {
			this.FormData.group_id = this.group[e.detail.value].tt_group_id;
			this.FormData.group_name = this.group[e.detail.value].group_name;
		},
		next() {
			this.$refs.form.validate().then(async (res) => {
				uni.navigateTo({
					url: '/pageA/lock/search?id=' + this.FormData.group_id + '&name=' + this.FormData.name
				});
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				this.group = data.data;
			});
		}
	}
};
</script>